<template>
    <div ref="layoutRef" :style="{height: layoutHeight  + 'px'}" style="height: 100%;position: absolute;width: 100%">
        <div ref="serchRef" style="width: 100%">
            <slot name="search"></slot>
        </div>
        <el-card>
            <div ref="tableHeaderRef">
                <slot name="header"></slot>
            </div>
            <slot name="table" :height="tableHeight"></slot>
            <div :style="{height: pageHeight  + 'px'}">
                <slot name="pagination"></slot>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
    import {defineProps, onMounted, onUnmounted, ref} from "vue";

    let layoutHeight = ref(); //全局包围部分
    let layoutRef = ref(); //全局包围部分
    let serchRef = ref(); //搜索部分
    let tableHeight = ref(); //表格部分
    let tableHeaderRef = ref(); //表格部分

    const props = defineProps(['pageHeight']);
    let pageHeight = props.pageHeight === undefined ? 50 : props.pageHeight;

    onMounted(() => {
        computeHeight();
    })
    // 在组件销毁完成触发
    onUnmounted(() => {
        clearInterval(timer)
    })
    let timer;

    //动态计算内容的高度
    function computeHeight() {
        clearInterval(timer);
        timer = setInterval(() => {
            //需要定时执行的代码
            layoutHeight.value = layoutRef.value.offsetHeight - serchRef.value.offsetHeight;
            tableHeight.value = layoutHeight.value - pageHeight - tableHeaderRef.value.offsetHeight - 45
        }, 1000)
    }
</script>
<script lang="ts">
    export default {
        name: 'TableLayout',
    }
</script>
<style scoped>
</style>
